<template>
  <div id="app">
    <div class="add">
      编号:<input type="text" v-model="code" /> 品牌名称:<input
        type="text"
        v-model="productName"
    />
      <br />
      产品图片地址:<input type="text" v-model="imgSrc" />

      价格:<input type="text" v-model="price" />
      <input type="button" value="添加" @click="add" />
    </div>

    <div class="add">
      品牌名称:<input
        type="text"
        placeholder="请输入搜索条件"
        @keyup.enter="serch"
        ref="ipn1"
    />
    </div>

    <div style="overflow: auto; height: 300px">
      <table class="tb">
        <tr>
          <th>
            <input
                type="checkbox"
                @change="turn"
                v-model="checkAll"
            />
          </th>
          <th v-for="(p,index) in tableHeader " :key="index">{{p}}</th>
        </tr>
        <tr v-for="(item) in cart" :key="item.id">
          <td>
            <input
                type="checkbox"
                name=""
                id=""
                :checked="item.checkeds"
                v-model="chcecks"
                :value="item"
            />
          </td>
          <td>
            <img :src="item.imgSrc" alt="" width="50" height="50" />
          </td>
          <td>{{item.code}}</td>
          <td>{{item.productName}}</td>
          <td>{{item.price}}</td>
          <td>
            <button @click="reduce(item.count,item)">-</button>
            <b> {{item.count}}</b>
            <button @click="plus(item.count,item)">+</button>
          </td>
          <td>
            <button @click="del(item.id,item)">删除</button>
          </td>
        </tr>
        <!-- 动态生成内容tr -->
      </table>
      <div class="add" style="text-align: center" v-show="!cart.length">
        没有更多数据了
      </div>
    </div>
    <h1>总价为 : {{priceAll}}</h1>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      checkAll: false,
      code: "", //产品编号
      productName: "", //产品名称
      imgSrc: "", //产品图片地址
      price: "", //价格
      checkeds: false,
      tableHeader: ["产品图片", "编号", "品牌名称", "价格", "数量", "操作"],
      cart: JSON.parse(localStorage.getItem("b")) || [],
      table: [],
      chcecks: [],
    }
  },
  methods: {
    //增加
    add() {
      if (!this.code || !this.productName || !this.price) {
        alert("编号 产品名称 价格必填");
        return;
      }
      console.log("2222");

      let obj = {
        id: Math.random().toString(32).substr(2),
        code: this.code,
        imgSrc: this.imgSrc,
        productName: this.productName,
        price: this.price,
        count: 1,
        checkeds: this.checkeds,
      };

      this.cart.unshift(obj);
      console.log(this.cart);
      localStorage.setItem(`b`, JSON.stringify(this.cart));
    },
    del(id, itme) {
      if (confirm(`你确定删除    ${itme.productName}    吗？`)) {
        console.log(id); //1
        let b = JSON.parse(localStorage.getItem("b"));
        this.cart = b.filter((item) => item.id !== itme.id);
        this.chcecks = this.chcecks.filter((item) => item.id !== itme.id);
        localStorage.setItem("b", JSON.stringify(this.cart));
        this.$refs.ipn1.value = "";
      }
    },
    serch() {
      console.log("qqq");
      console.log(this.$refs.ipn1.value);
      this.cart = this.cart.filter((p) => {
        console.log(p.productName);
        return p.productName == this.$refs.ipn1.value;
      });

      console.log(this.cart);
    },

    plus(count, item) {
      if (count <= 0) return (count = 0);
      return (item.count = count + 1);
    },

    reduce(count, item) {
      if (count <= 0) return (count = 0);
      return (item.count = count - 1);
    },
    turn() {
      if (this.checkAll) {
        this.chcecks = this.cart;
      } else {
        this.chcecks = [];
      }
      // if (e.target.checked) {
      //   console.log("khgef");
      //   console.log(this.cart);
      //   this.cart.forEach((val) => {
      //     val.checkeds = true;
      //   });
      // } else {
      //   this.cart.forEach((val) => {
      //     val.checkeds = false;
      //   });
      // }
    },
  },
  mounted() {
    console.log(this.cart);
  },

  computed: {
    priceAll() {
      let resd = this.chcecks.reduce((total, p) => {
        return (total += p.count * p.price);
      }, 0);
      console.log(resd);
      return parseInt(resd)
    },
  },
  watch: {
    chcecks() {
      if (this.chcecks.length === this.cart.length) {
        if(this.chcecks.length===0){
          this.checkAll = false;
          return
        }
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },
  },
}
</script>
<style scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style >